<template>
  <div class="PaymentDetails">
    <div
      class="prev-btn"
      @click="$router.go(-1)"
    >
      <svg
        viewBox="0 0 1000 1000"
        class="demo-nav__back"
      >
        <path
          fill="#969799"
          fill-rule="evenodd"
          d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"
        >
        </path>
      </svg>
    </div>
    <van-form ref="form" :model="form">

      <div class="now-payment">
        <ul class="now-list">
          <li class="left">
            <h2>现在支付</h2>
            <p>价格详情</p>
          </li>
          <li class="right">￥{{pricea}}</li>
        </ul>
      </div>
      <div class="border"></div>

      <div class="checkbox">
        <ul>
          <li class="zhifu">
            <img class="imgaa" src="../../assets/zhifu.png">
          </li>
          <li>
            <span class="dd">订单支付</span>
            <span class="tgz">(平台资金托管 保护双方权益)</span>
          </li>
          <!--<li class="box">-->
          <!--<van-checkbox v-model="order"></van-checkbox>-->
          <!--</li>-->
        </ul>
      </div>

      <div class="tg" align="left">
        大额交易用户须通过手机银行或银行柜台转账至以下账户
      </div>

      <div class="tg" align="left">
        账户：河北当途网络科技有限公司<br/>
        账号：0402021609300377978<br/>
        开户行：中国工商银行股份有限公司石家庄高新支行<br/>
      </div>

      <div class="border"></div>
      <div class="upload">
        <p
          class="first"
          style="margin-bottom:12px;"
        >上传打款凭证</p>
        <ul class="list">
          <li class="left">
            <p class="time-p">第一期支付</p>
            <div class="ipt">
              <label for="first">￥</label>
              <input
                type="text"
                id="first"
                v-model.number="firstPayment"
              >
              <p class="uploader-p">
                <van-uploader
                  upload-text="上传凭证"
                  v-model="firstList"
                  :deletable="false"
                  :max-count="1"
                  :after-read="firstRead"
                />
              </p>
            </div>
          </li>
          <li class="right">
            <p class="time-p">第二期支付</p>
            <div class="ipt">
              <label for="last">￥</label>
              <input
                type="text"
                id="last"
                v-model.number="lastPayment"
              >
              <p class="uploader-p">
                <van-uploader
                  upload-text="上传凭证"
                  v-model="lastList"
                  :deletable="false"
                  :max-count="1"
                  :after-read="lastRead"
                  :disabled="disabled"
                />
              </p>
            </div>
          </li>

        </ul>
        <p class="last">注：用户转款到平台，平台负责资金托管，保障用户及施工方资金安全，由用户按合同约定金额分期向施工方拨付款项。</p>
      </div>

      <!--<div-->
      <!--class="border"-->
      <!--style="margin-top:-20px;"-->
      <!--&gt;</div>-->
      <div class="password">
        <p class="ht">用户按合同约定金额和期数向施工方拨付款项</p>
        <p class="je">
          <span>订单金额共</span>
          <input
            type="text"
            v-model.number="firstMoney"
          >
          <span>元，剩余</span>
          <input
            type="text"
            v-model.number="lastMoney"
          >
          <span>元待拨付。</span>
        </p>
        <ul class="list">
          <li style="margin-left: 18px">
            <p class="title">第一次拨款</p>
            <div class="ipt">
              <label for="last">￥</label>
              <input
                :readonly="zhiduertou"
                type="text"
                id="last"
                v-model.number="oneMoney"
                :disabled="disBool"
                ref="ipt-one"
              >
            </div>
          </li>
          <li class="public">
            <p class="title">第二次拨款</p>
            <div class="ipt">
              <label for="last">￥</label>
              <input
                :readonly="zhiduyi"
                type="text"
                id="last"
                v-model.number="twoMoney"
                :disabled="disBool"
                ref="ipt-two"
              >
            </div>
          </li>
          <li class="public">
            <p class="title">第三次拨款</p>
            <div class="ipt">
              <label for="last">￥</label>
              <input
                :readonly="zhiduer"
                type="text"
                id="last"
                v-model.number="threeMoney"
                :disabled="disBool"
                ref="ipt-three"
              >

            </div>
          </li>
          <li class="public">
            <p class="title">第四次拨款</p>
            <div class="ipt">
              <label for="last">￥</label>
              <input
                :readonly="zhidusan"
                type="text"
                id="last"
                v-model.number="fourMoney"
                :disabled="disBool"
                ref="ipt-four"
              >
            </div>
          </li>
          <li class="public">
            <p class="title">第五次拨款</p>
            <div class="ipt">
              <label for="last">￥</label>
              <input
                :readonly="zhidusi"
                type="text"
                id="last"
                v-model.number="fiveMoney"
                :disabled="disBool"
                ref="ipt-five"
              >
            </div>
          </li>
        </ul>
        <div class="enter">
          <span class="title">请输入支付密码</span>
          <van-password-input
            :value="checked"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
          />
          <span
            class="enterBtn"
            v-show="btnBool"
            @click="enterFun"
          >确定</span>

          <!-- 数字键盘 -->
          <van-number-keyboard
            v-model="checked"
            :show="showKeyboard"
            @blur="showKeyboard = false"
          />
        </div>
      </div>
      <p class="p-row">

        <van-row>
          <van-col span="2">
            <van-radio-group v-model="checkeder">
              <van-radio name="1"></van-radio>
            </van-radio-group>
<!--            <van-checkbox v-model="checkeder" @click="xuankaung"></van-checkbox>-->
          </van-col>
          <van-col span="22">
            <div align="left">
              <span>我同意平台</span>
              <span style="color: #8cc5ff" @click="showBuy">服务协议</span>，
              <span style="color: #8cc5ff" @click="showCancel">取消政策</span>和
              <span style="color: #8cc5ff" @click="showRefund">退款政策</span>
              <span>我也同意支付以上所示订单金额。</span>
            </div>

          </van-col>

        </van-row>
      </p>
      <div
        class="border"
        style="margin-top:8.5rem;"
      ></div>

      <van-goods-action>
        <van-goods-action-icon color="#be99ff" type="warning" style="width: 130px" icon="phone-o" text="如有疑问请联系客服"
                               @click="onClickIcon"/>


        <van-goods-action-button
          type="danger"
          text="确认支付"
          @click="onClickButton"
          :disabled="disabled"
        />
        <!--v-show="onannui"-->
      </van-goods-action>
      <van-popup
        v-model="show"
        style="width: 13rem;height: 2rem;padding-top: 0.4rem;background-color: white;opacity:0.6;border-radius: 20px"
      >符合订单，请您支付即可
      </van-popup>
    </van-form>

    <van-popup
      v-model="showTwo"
      style="width: 13rem;height: 2rem;padding-top: 0.4rem;background-color: white;opacity:0.6;border-radius: 20px"
    >已超出金额
    </van-popup>
  </div>
</template>

<script>
  import {findAllList} from "@/api/customer/passwordcode";
  import {instalmentList, instalmentedit, updateTai, uploadVoucher, instalmentSelect,selectinstalmentState} from "@/api/customer/instalment";
  import {Dialog, Toast} from 'vant';

  export default {
    name: 'PaymentDetails',
    data() {
      return {
        checkeder: '1',
        disabled: true,
        // form:{},
        pricea: '',
        instaList: [],
        zhiduertou: false,
        zhiduyi: true,
        zhiduer: true,
        zhidusan: true,
        zhidusi: true,
        onannui: false,
        btnBool: true, // 是否显示确定按钮
        show: false, // 是否显示弹出层
        showTwo: false, // 是否显示弹出层
        disBool: false, // 表单是否禁读
        firstPayment: 0, // 第一期支付
        lastPayment: 0, // 第二期支付
        firstList: [], // 第一期上传凭证
        lastList: [], // 第二期上传凭证
        order: false,
        // firstMoney: 0, // 定金总金额
        // lastMoney: 0, // 剩余金额
        nidongde: '',
        form: {
          numoneMoney: '',
          numtwoMoney: '',
          numthreeMoney: '',
          numfourMoney: '',
          numfiveMoney: '',

          // numfirstList:[],
          numfirstPayment: '',
          numlastPayment: '',
          numlastList: '',
          numtState: '',
          firstList: '',
          lastList: '',
          instalmentId:'',
        },
        instalmentState: '',
        oneMoney: 0, // 第一次拨款
        twoMoney: 0, // 第二次拨款
        threeMoney: 0, // 第三次拨款
        fourMoney: 0, // 第四次拨款
        fiveMoney: 0, // 第五次拨款
        checked: '',
        showKeyboard: true,
        listpaas: Array,
        zhi: '',
        constructionId: 0, //施工队id
        instalmentId: 0, //数据库新增施工队分期支付主键id
        // disabled: true,
        timing: '',
      }
    },
    computed: {

      firstMoney() {
        if (this.firstPayment > this.pricea){
          Toast('第一起付款不能大于总金额');
        }
        // if((this.firstPayment + this.lastPayment) < this.pricea){
        //   Toast('第一起付款和第二期付款要等于金额');
        //   return 0;
        // }
        // parseInt()
        return this.firstPayment + this.lastPayment
      },
      lastMoney() {
        let bool = this.firstMoney - (this.oneMoney + this.twoMoney + this.threeMoney + this.fourMoney + this.fiveMoney)
        if (bool < -0) {
          this.showTwo = true;
          return bool;
        }
        if (bool === 0 && this.firstMoney > 0) {
          this.show = true
          this.disabled = false
          this.form.numoneMoney = this.oneMoney
          this.form.numtwoMoney = this.twoMoney
          this.form.numthreeMoney = this.threeMoney
          this.form.numfourMoney = this.fourMoney
          this.form.numfiveMoney = this.fiveMoney

          this.form.numfirstPayment = this.firstPayment

          var aaaa = this.pricea - this.firstPayment;
          this.form.numlastPayment = aaaa;
          instalmentedit(this.form).then(res => {
            return 0;
          })
          this.disBool = true
          this.btnBool = false
          this.onannui = true
        }
        if (bool === 0 && this.firstMoney !== 0 && this.twoMoney !== 0 && this.threeMoney !== 0 && this.fourMoney !== 0 && this.fiveMoney !== 0) {
          this.btnBool = false
        }
        return this.firstMoney - (this.oneMoney + this.twoMoney + this.threeMoney + this.fourMoney + this.fiveMoney)
      }


    },

    created() {
      this.constructionId = this.$route.query && this.$route.query.constructionId;
      this.pricea = this.$route.query && this.$route.query.pricenum;
      this.form.numtState = this.$route.query && this.$route.query.numinstalmentState;
      this.instalmentState  =this.$route.query && this.$route.query.numinstalmentState;

      this.getListPass();
      this.getinstalmentList();
      this.getselectinstalmentState();

    },

    methods: {
      getselectinstalmentState(){
        selectinstalmentState(this.instalmentState).then(res=>{
          this.nidongde = res.data.data.instalmentId
        })
      },
      xuankaung() {
        // if (this.checkeder == true) {
        //   this.disabled = false
        // } else if (this.checkeder == false) {
        //   Toast({
        //     message: "请勾选平台协议。",
        //     position: "top"
        //   });
        //   this.disabled = true
        // }
      },

      getinstalmentList() {
        instalmentList().then(res => {
          // console.log("*********res******"+JSON.stringify(res))
          this.instaList = res.rows;
        })
      },

      getListPass() {
        findAllList().then(res => {
          this.zhi = res.data[0].passwordcode;
          console.log("********this.zhi******" + this.zhi)
        })
      },

      // 第一期上传图片读取完 回调函数
      firstRead(e) {
        console.log('第一期支付上传');
        //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
        let fd = new FormData()
        fd.append("file", e.file)
        fd.append("instalmentId", this.nidongde);
        fd.append("status", 1);
        uploadVoucher(fd).then(res => {
          this.form.firstList = "http://51jhf.com/profile/xiazai"+res.data.tu;
          if (res.data.code == 200) {
            // alert('第一期支付凭证上传成功！');
            Toast({
              message: "第一期支付凭证上传成功。",
              position: "top"
            });
            this.disabled = false
            this.instalmentId = res.data.instalmentId;
            this.timing = setInterval(this.instalmentSelectById, 10000);
          } else {
            // alert('第一期支付凭证上传失败，请重试！')
          }

        });
      },
      // 第二期上传图片读取完 回调函数
      lastRead(e) {
        console.log('第二期支付上传');
        //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
        let fd = new FormData()
        fd.append("file", e.file)
        fd.append("constructionId", this.constructionId);
        fd.append("instalmentId", this.instalmentId);
        uploadVoucher(fd).then(res => {
          this.form.lastList = "http://51jhf.com/profile/xiazai"+res.data.tu;
          if (res.data.code == 200) {
            // alert('第二期支付凭证上传成功！');
          } else {
            // alert('第二期支付凭证上传失败，请重试！')
          }
        });
      },
      // 确定按钮执行函数
      enterFun() {
        this.form.instalmentId = this.$route.query && this.$route.query.instalmentId;
        console.log("******0+"+this.form.instalmentId)
        let bool = this.firstMoney - (this.oneMoney + this.twoMoney + this.threeMoney + this.fourMoney + this.fiveMoney)
        // 判断支付密码
        if (this.checked === this.zhi) {
          if (this.oneMoney > 0 && bool !== 0 && this.twoMoney === 0) {
            this.$refs['ipt-two'].focus()
            this.form.numoneMoney = this.oneMoney
            this.form.numfirstPayment = this.firstPayment
            instalmentedit(this.form).then(res => {
              return 0;
            })
            this.zhiduyi = false;
            this.zhiduertou = true;
            this.checked = '';
          } else if (this.twoMoney > 0 && bool !== 0 && this.threeMoney === 0) {
            this.$refs['ipt-three'].focus()
            this.form.numtwoMoney = this.twoMoney
            this.form.numlastPayment = this.lastPayment
            instalmentedit(this.form).then(res => {
              return 0;
            })
            this.zhiduer = false;
            this.zhiduyi = true;
            this.checked = '';
          } else if (this.threeMoney > 0 && bool !== 0 && this.fourMoney === 0) {
            this.$refs['ipt-four'].focus()
            this.form.numthreeMoney = this.threeMoney
            instalmentedit(this.form).then(res => {
              return 0;
            })
            this.zhidusan = false;
            this.zhiduer = true;
            this.checked = '';
          } else if (this.fourMoney > 0 && bool !== 0 && this.fiveMoney === 0) {
            this.$refs['ipt-five'].focus()
            this.form.numfourMoney = this.fourMoney
            instalmentedit(this.form).then(res => {
              return 0;
            })
            this.zhidusi = false;
            this.zhidusan = true;
            this.checked = '';
          }
        } else {
          Toast.fail('密码错误');
          this.checked = '';
        }
      },
      // 底部支付按钮执行函数
      // handleEnter () {
      //   console.log('支付');
      // }

      onClickButton() {
        var aaaa = this.pricea - this.firstPayment;
        this.form.numlastPayment = aaaa;
        this.form.numfirstPayment = this.firstPayment
        instalmentedit(this.form).then(res => {
          Toast.success('支付成功')
          this.$router.push({
            path: "/"
          });
        })
      },
      onClickIcon() {
        this.$router.push({
          path: "/terraceTel"
        });


      },
      showBuy(){
        Dialog.alert({
          messageAlign:'left',
          title: '服务协议',
          message: '欢迎您与淘小建（以下简称“淘小建”或者“我们”）签署《服务协议》（以下简称“本协议”）并使用淘小建自建房平台服务！\n' +
            '在您使用我们提供的服务前，请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体标识，您应重点阅读。除非您已阅读并接受本协议所有条款，否则您无权使用淘小建自建房平台提供的服务。您的使用行为将被视为对本协议全部内容的认可。 \n' +
            '一、定义\n' +
            '淘小建自建房平台：指淘小建各经营者共同运营之淘小建移动应用软件（APP）等（包括未来技术发展出现的新的形态）。\n' +
            '用户：包含注册用户和非注册用户，以下亦称为“您”。注册用户是指通过淘小建自建房平台完成全部注册程序后，使用淘小建自建房平台服务或淘小建自建房平台资料的用户。非注册用户是指未进行注册、直接登录淘小建自建房平台或间接地使用淘小建自建房平台服务和淘小建自建房平台资料的用户。\n' +
            '商家、注册用户：指申请入驻淘小建自建房平台销售商品或者提供服务的法人、其他经济组织、个体工商户或者自然人的经营主体。\n' +
            '淘小建自建房平台服务：指基于互联网，由淘小建自建房平台为用户和商家、注册用户提供商品/服务交易的信息匹配服务以及通过淘小建自建房平台为用户提供的自营的商品/服务。\n' +
            '淘小建自建房平台规则：包括在淘小建自建房平台内所有已经发布及后续发布的全部规则、解读、公告等内容以及在平台内容内发布的各类规则、实施细则、产品流程说明、公告等。\n' +
            '二、协议效力\n' +
            '2.1 在您按照注册页面提示填写信息、阅读并同意本协议并完成全部注册程序后或以其他淘小建允许的方式实际使用淘小建自建房平台服务时，您即受本协议的约束。\n' +
            '2.2 您在使用淘小建某一特定服务时，该服务可能会另有单独的协议、相关业务规则等。所有淘小建已经发布的或将来可能发布的规则为本协议不可分割的组成部分，与本协议具有同等法律效力。除另行明确声明外，任何淘小建及其关联公司提供的服务均受本协议约束。\n' +
            '2.3 淘小建有权根据国家法律法规的更新、产品和服务规则的调整需要不时地制订、修改本协议及/或各类规则，并以网站或移动应用软件公示的方式进行公示，若修改已公示的协议，则修改后的协议自公示之日起七个自然日后开始生效。如您继续使用淘小建自建房平台服务即表示您接受经修订的协议和规则。如发生有关争议时，以淘小建最新的相关协议和规则为准。\n' +
            '2.4您理解并同意，由于淘小建可能进行业务战略调整，届时由变更后的淘小建经营者与您共同履行本协议并向您提供服务，淘小建各业务经营者的变更不会影响您本协议项下的权益。\n' +
            '三、服务简介\n' +
            '3.1 淘小建自建房平台经营主体为河北当途网络科技有限公司。\n' +
            '3.2我们通过淘小建自建房平台为您提供商品/服务及信息匹配服务，您可通过淘小建自建房平台上查询商品和服务的信息、达成交易意向并进行交易、对购买的商品或服务进行评价、发布交易信息、参加淘小建自建房平台活动以及使用其他信息服务及技术服务等；为改善用户体验或经营需要，淘小建自建房平台服务的项目和内容可能会不时调整。\n' +
            '3.3淘小建自建房平台注册入驻商户利用淘小建自建房平台开展经营活动，依法自负盈亏，独立承担法律责任，与淘小建自建房平台并非任何法律上及事实上的劳动关系、雇佣关系。\n' +
            '3.4 淘小建自建房平台注册入驻商户应自行准备如下设备并自行承担如下开支：\n' +
            '（1）上网设备：包括但不限于计算机、手机终端、调制解调器或其他必备的上网装置；\n' +
            '（2）上网开支：包括但不限于网络接入费、手机流量费等费用。\n' +
            '3.5关于入驻商户诚信金缴纳：\n' +
            '（1）对于已缴纳诚信金的入驻商户，则缴纳的诚信金作为该入驻商户在淘小建自建房平台所售商品及服务的质量保证金，如所售商品及服务出现质量纠纷，该诚信金作为对用户赔付最大金额，淘小建自建房平台不承担连带赔付责任。\n' +
            '（2）对于未缴纳诚信金的入驻商户，淘小建自建房平台不承担该入驻商户在平台所售商品及服务的质量担保及连带赔付责任。\n' +
            '（3）对于已缴纳诚信金的入驻商户，该入驻商户在撤销淘小建自建房平台所经营店铺后，该商户已缴纳的诚信金将在该商户最后一笔订单质保期结束后方可由淘小建自建房平台退回至该商户指定账户。\n' +
            '四、用户管理\n' +
            '4.1 您确认，在您开始注册程序或使用淘小建服务前，您应当具备中华人民共和国法律规定的与您行为相适应的民事行为能力。若您不具备前述与您行为相适应的民事行为能力，则您及您的监护人应依照法律规定承担因此而导致的一切后果。若您代表法人实体签订本协议，您应获得授权并遵守本协议。（并约束该法人实体）。\n' +
            '4.2 在使用淘小建自建房平台服务时，您应按照淘小建自建房平台页面的提示提供真实、准确、完整、合法、有效的个人信息、移动电话号码，并根据淘小建自建房平台系统操作提示验证您的手机号码。淘小建在任何时候都有权以相关有效手段验证您所提供的信息，并有权在确定您提供的信息验证不真实时，拒绝向您提供服务或拒绝您使用我们的应用程序。\n' +
            '4.3 您应当妥善保管在申请注册淘小建自建房平台时获得的账户和密码，不得将其泄露或者提供给任何第三方，否则，由此给您造成的损失及风险由您自行承担。如您无法提供相反的有效证据，您的账户下的一切使用及操作行为均视为您个人所为，除淘小建存在过错外，您应对您账户项下的所有行为结果负责。如您发现他人不当使用您的账户或有任何其他可能危及您的账户安全的情形时，您应当立即以书面的、有效的方式通知淘小建，要求淘小建暂停相关服务。在此，您理解淘小建对您的请求采取行动需要合理时间，淘小建对在采取行动前已经产生的后果（包括但不限于您的任何损失）不承担任何责任。\n' +
            '4.4 您可以为您的账户设定昵称、头像等，但必须遵守法律法规、社会公德、公序良俗，且不得侵犯他人合法权益，否则，淘小建有权采取限制措施或终止为您提供服务。若您不再属于淘小建注册用户，对于您的原昵称，淘小建可以将其开放给任意用户注册使用。\n' +
            '4.5 除非有法律规定或依据生效司法裁决，或者符合淘小建公布的条件，否则您的账户、登陆密码和支付密码（如有）和验证码不得以任何方式转让、借用、赠与或继承，否则淘小建有权追究您的违约责任，且由此产生的一切责任均由您承担。\n' +
            '4.6 您了解并同意，淘小建拥有通过邮件、短信、电话等形式，向您及您指定的收货人发送订单信息、促销活动、广告或广告链接等告知信息的权利。\n' +
            '4.7 淘小建不对您发布信息的删除或储存失败负责，淘小建有权判定您的行为是否符合淘小建自建房平台规则的要求，如果您的行为不符合前述要求，淘小建有权终止对您提供服务。\n' +
            '4.8 依据国家相关法律法规规章，您同意严格遵守以下义务：\n' +
            '（1）不得传输或发表：煽动抗拒、破坏宪法和法律、行政法规实施的言论，煽动颠覆国家政权，推翻社会主义制度的言论，煽动分裂国家、破坏国家统一的言论，煽动民族仇恨、民族歧视、破坏民族团结的言论；\n' +
            '（2）从中国大陆向境外传输资料信息时必须符合中国有关法律法规；\n' +
            '（3）不得利用本平台从事洗钱、窃取商业秘密、窃取个人信息等违法犯罪活动；\n' +
            '（4）不得干扰本网站的正常运转，不得侵入本网站及国家计算机信息系统；\n' +
            '（5）不得传输或发表任何违法犯罪的、骚扰性的、中伤他人的、辱骂性的、恐吓性的、伤害性的、庸俗的、淫秽的、不文明的等信息资料；\n' +
            '（6）不得传输或发表损害国家社会公共利益和涉及国家安全的信息资料或言论；\n' +
            '（7）不得利用在本网站注册的账户进行非法牟利性经营活动（如炒货、转卖等）；\n' +
            '（8）不得在评论区发布与所售商品或服务无关的信息，或恶意进行负面评价；\n' +
            '（9）不得以恶意索赔、投诉等方式干扰商家、注册用户正常经营；\n' +
            '（10）不得发布任何侵犯他人著作权、商标权等知识产权及其他合法权利的内容。淘小建保留删除网站内涉嫌违反本协议、法律法规政策及不真实的信息内容且无须通知您的权利；  \n' +
            '（11）不得教唆他人从事本条例所禁止的行为。\n' +
            '若您未遵守以上规定的，淘小建自建房平台有权作出独立判断并采取暂停或者永久关闭您的账号，并且您须对自己的言论和行为承担法律责任。 \n' +
            '五、交易规则\n' +
            '5.1您同意并认可淘小建自建房平台上的商品/服务宣传、参数、价格、数量、是否有货等商品/服务信息，除自营的商品/服务信息由淘小建提供外，其它的商品/服务信息由商家、注册用户提供，且商品/服务信息随时都有可能发生变动，淘小建不作特别通知。由于淘小建自建房平台上信息的数量极其庞大，虽然淘小建会尽最大努力保证您所浏览商品/服务信息的准确性，但由于众所周知的互联网技术因素等客观原因存在，网页显示的信息可能会有一定的滞后性或差错，对此情形您表示知悉并理解，并同意不追究淘小建的违约或侵权责任；如您发现商品/服务信息错误的或有疑问的，请您不要提交订单，并在第一时间告诉淘小建或商家、注册用户。\n' +
            '5.2商家、注册用户将尽量满足您的购物需求，避免您选购的商品无货或服务无法提供，但是由于技术障碍以及各类商家、注册用户难以控制和避免的因素，商家、注册用户无法保证符合您提交的订单中所有要求的商品都有货及/或服务都可提供；如您订购的商品无货及/或服务无法提供，商家、注册用户、注册用户将及时与您联系，您有权取消订单。\n' +
            '5.3如果发生了意外情况，您提交订单后，由于供应商、注册用户提价、税额变化或者由于网页信息错误等造成商品/服务价格变化，您可以通知商家、注册用户或委托淘小建为您取消订单。\n' +
            '5.4在商品/服务展示页面或相关活动页面（包括但不限于拼团活动），对于淘小建自营的或商家、注册用户经营的商品/服务可能会设置限购数量。若您拟购买超过限购数量的商品/服务，请您与淘小建或商家、注册用户联系，若您已经从非淘小建或商家、注册用户指定渠道提交超出限定数量的订单，淘小建或商家、注册用户有权单方予以取消。\n' +
            '5.5第5.4条所述的限购数量，除特殊说明外并非仅针对单一账号，如您通过多个账号下单的订单总数超出限购数量，或虽然单笔订单数量未超出限购数量，但通过订单相关信息（包括但不限于订单IP地址、收货人等）可以判断实际购买人为同一人或有紧密关联，且相关订单合计购买数量超过该商品限购数量的，淘小建或商家、注册用户有权取消相关订单。\n' +
            '5.6您理解并同意，除商家、注册用户在商品页面明确表示包邮/免邮费外，送货运费需由您另行支付，根据您选择的商品的价格、区域和送货方式不同，商家、注册用户可能对运费进行适当减免。\n' +
            '5.7 淘小建自建房平台上显示的商品预计送货时间为参考时间，非淘小建或商家、注册用户承诺到货时间或实际到货时间。\n' +
            '5.8当您在淘小建自建房平台购买商品/服务时，请您务必仔细确认所购商品的品名、价格、数量、型号、规格、尺寸或服务的时间、内容、限制性要求等重要事项，并在下单时核实您的联系地址、电话、收货人等信息。\n' +
            '5.9您在淘小建自建房平台下单购买淘小建自建房平台入驻商家、注册用户的商品/服务后，为保障您的合法权益，请您务必在接受商家、注册用户的商品/服务时核实商家、注册用户及/或其工作人员身份信息，确认您下单购买商品/服务的商家、注册用户与实际提供商品/服务的商家、注册用户身份一致，若与您下单信息不一致，您应立即取消订单并向淘小建投诉，淘小建将依据相关处罚规则对商家、注册用户进行处罚。如因您的原因未经核实使用了非下单的商家、注册用户的服务，因此产生的纠纷或损失，全部由您自行承担。\n' +
            '5.10商品/服务的收货与验货规则\n' +
            '5.10.1如您下单时填写的收货人或联系人非您本人，则该收货人或联系人的行为和意识表示产生的法律后果均由您承担。\n' +
            '5.10.2除您与商家、注册用户另行约定外，商家、注册用户将在配送范围内采取快递或物流等方式把商品送到您下单时填写的收货地址，请您在收货前务必先行验货，当您或您指定的收货人/联系人（1）在载明标的物数量、型号、规格的送货单、确认单等配送凭证上签字或（2）自配送人员处或收货地址附近的快递代收点处取货后未当面提出异议，即视为您完成收货，确认商品无数量和外观瑕疵。\n' +
            '5.10.3您认可并同意，因以下情况造成订单延迟或无法配送的，您无权要求商家、注册用户承担相关责任：\n' +
            '（1）您下单时填写的信息（包括但不限于送货地址、联系方式等信息）错误、不存在或不够详细等原因以致无法联系您或您指定的收货人/联系人；\n' +
            '（2）配送人员两次通过您下单时填写的电话联系，均无法接通或无人接听；\n' +
            '（3）货物送达无人签收；\n' +
            '（4）情势变更；\n' +
            '（5）不可抗力，如自然灾害、罢工、暴乱、战争、政府行为、司法行政命令等。\n' +
            '5.12您的购买行为应当基于真实的消费需求，不得存在对商品/服务实施恶意购买、恶意维权等扰乱淘小建自建房平台正常交易秩序的行为。基于维护淘小建自建房平台交易秩序及交易安全的需要，淘小建发现上述情形时可主动执行关闭相关交易订单等操作。\n' +
            '5.13 您在淘小建自建房平台交易过程中与商家、注册用户产生纠纷的，包括但不限于对商品/服务的数量、质量、价格、有效期、预约时间、商家、注册用户地址、配送方式、退换货方式、退款条件、售后服务等问题发生争议的，您应与商家、注册用户自主协商解决，承担各自的责任。淘小建可协助您与商家、注册用户之间争议的协商调解。\n' +
            '六、付款及发票\n' +
            '6.1您理解并同意，您在淘小建自建房平台向商家、注册用户支付的费用可能仅为预付款或上门费，请您在购买前仔细阅读服务详情内的收费标准，并在服务前与商家、注册用户确认您应当实际支付的费用。\n' +
            '6.2针对您使用的入驻淘小建自建房平台的商家、注册用户的商品/服务，商家、注册用户已经委托淘小建将其提供商品/服务的收费的标准及办法公示在淘小建的应用程序上，您在通过淘小建自建房平台下单前已经确认并同意了上述已公示的收费标准及办法，上述收费标准及办法可能会根据您所下单的商家、注册用户所处的城市及市场的供需情况的不同而有所调整，您应当自行留意服务的价格，并根据自主意愿选择适合您的服务。\n' +
            '6.3在您确认通过淘小建自建房平台选择入驻商家、注册用户的商品/服务后，根据您选择的服务项目以及商家、注册用户提供的价格标准和计算办法，淘小建自建房平台提供基础工费供您参考。您清楚并同意，上述价格为基础工费，在完成下单同时支付基础工费，您需要支付的全部款项应当以订单结束时系统按照收费标准为您计算出的价格或您与商家、注册用户实际协商确定的价格为准。\n' +
            '6.4您承诺遵守契约精神，对您在淘小建自建房平台下单并享有商品/服务的情况下履行您的基本付款义务（具体要求付款时点以用户与入驻商户签订协议为主），若非因商品/服务质量问题等客观实际的因素，您恶意拒绝付款的，淘小建有权对您采取技术措施，包括但不限于冻结或注销您的账号停止为您提供服务，并协助商家、注册用户追究您的法律责任。\n' +
            '6.5您理解并同意，如您下单购买搬家货运服务，您可能需要支付的金额包括但不限于以下几部分：\n' +
            '6.5.1最终实际发生的里程费：包括基础起步费及超出里程费，您需通过平台提供的支付方式完成费用的支付；\n' +
            '6.5.2等候时长费用：指司机及车辆到达约定地点后（包括到达地点和送达地点），因您的原因需要司机在约定地点等候您上（下）车或者您委托运输的物品装（卸）货，根据商家、注册用户的要求，一定时间内的等候时长是免费的，如超出则需另行计费，您需要主动前往平台的收费标准处查阅关于等候时长的计价规则；\n' +
            '6.5.3装卸货费用：因您需要商家、注册用户及/或其工作人员额外提供装卸货服务而需要加收的费用（由您与商家、注册用户及/或其工作人员自行协商并单独结账，因此产生的纠纷与淘小建经营者无关）。\n' +
            '6.5.4其他费用：指您在使用商家、注册用户提供的运输服务中所可能产生的高速费、停车费、过路过桥费及您与商家、注册用户及/或其工作人员协商一致同意的他项费用。这些费用将独立于商家、注册用户及/或其工作人员为您提供运输服务的费用之外，需要由您自行承担。\n' +
            '6.6您理解并同意，淘小建各经营者并未就为您提供的信息匹配服务而向您收取费用，但是保留在今后因提供信息匹配服务而向您收取相关费用的权利。\n' +
            '6.7如果我们发现自己在未事先获得可证实的父母或法定监护人同意的情况下产生的订单及支付行为均视为有效订单及有效支付。\n' +
            '6.8您清楚并同意，如您需要发票，请您提前了解该商户有无开具发票能力，如您忽略此问题淘小建平台不承担相关责任。\n' +
            '七、责任限制\n' +
            '7.1 淘小建入驻商户依照法律规定履行基础保障义务，但对于下述原因导致的本协议履行障碍、履行瑕疵、履行延后或履行内容变更等情形，淘小建入驻商户并不承担相应的违约责任：\n' +
            '（1）因自然灾害、罢工、暴乱、战争、政府行为、司法行政命令等不可抗力因素；\n' +
            '（2）因电力供应故障、通讯网络故障等公共服务因素或第三人因素；\n' +
            '（3）在淘小建已尽善意管理的情况下，因常规或紧急的设备与系统维护、设备与系统故障、网络信息与数据安全等因素。\n' +
            '（4）您理解并同意，在淘小建自建房平台出现BUG的情况下非正常订单淘小建入驻商户有权取消订单。\n' +
            '7.2 您理解并同意，淘小建各经营者仅向您提供信息匹配服务，您了解淘小建自建房平台上的信息系商家、注册用户自行发布，由于海量信息的存在，淘小建无法杜绝可能存在的风险和瑕疵。淘小建对于任何自淘小建自建房平台而获得的他人的信息或者广告宣传等任何资讯（以下统称"信息"），不保证真实、准确和完整性。如果您通过上述"信息"而进行任何行为，须自行甄别真伪和谨慎预防风险。\n' +
            '7.3 淘小建有权根据业务战略规划或市场行情中断一项或多项服务，并不就此向任何人承担责任。\n' +
            '7.4 您理解并同意，在争议协商调解中，淘小建自建房平台的客服并非专业人士，仅能以普通人的认知对用户提交的凭证进行判断。因此，除存在故意或重大过失外，淘小建对争议协调决定免责。\n' +
            '八、用户信息的保护及授权\n' +
            '淘小建非常重视用户个人信息的保护，在您使用淘小建提供的服务时，您同意淘小建按照在平台上公布的《隐私政策》收集、存储、使用、披露、处理和保护您的个人信息。淘小建希望通过《隐私政策》向您清楚地介绍对您个人信息的处理方式，因此建议您完整地阅读《隐私政策》，以帮助您更好地保护您的隐私权。\n' +
            '九、所有权及知识产权\n' +
            '9.1 您一旦接受本协议，即表明您主动将您在任何时间段在淘小建自建房平台发表的任何形式的信息内容（包括但不限于评价、咨询、各类话题文章等信息内容）的财产性权利等任何可转让的权利（包括并不限于：复制权、发行权、出租权、展览权、表演权、放映权、广播权、信息网络传播权、摄制权、改编权、翻译权、汇编权以及应当由著作权人享有的其他可转让权利），全部独家且不可撤销地转让给淘小建所有，您同意淘小建有权就任何主体侵权而单独提起诉讼。\n' +
            '9.2 您同意并已充分了解本协议的条款，承诺不将已发表于淘小建自建房平台的信息，以任何形式发布或授权其它主体以任何方式使用（包括但不限于在各类网站、媒体上使用）。\n' +
            '9.3 淘小建名称中包含的所有权利 (包括企业名称、商誉和商标) 均归淘小建所有。淘小建自建房平台所包含的全部智力成果，包括但不限于数据库、网站设计结构、文字、图表、应用程序软件、照片、录像、音乐、声音及其前述组合，软件编译、相关源代码和软件 (包括小应用程序和脚本) ，上述智力成果的知识产权权利均归河北当途网络科技有限公司所有。用户只能在河北当途网络科技有限公司授权下才能使用这些内容，而不能擅自使用、复制、改变、演绎、衍生创造这些内容、或创造与内容有关的衍生产品，违者将追究其法律责任。\n' +
            '9.4 淘小建自建房平台所刊登的资料信息（包括但不限于编码、文字、图表、标识、按钮图标、图像、声音文件片段、数字下载、数据编辑和软件），均是淘小建或其内容提供者的财产，受中国和国际版权法的保护。淘小建自建房平台上所有内容的汇编是淘小建的排他财产，受中国和国际版权法的保护。本平台上所有软件都是淘小建或其关联公司的财产，受中国和国际版权法的保护。任何被授权的浏览、复制、打印和传播属于淘小建自建房平台网站内信息内容都不得用于商业目的且所有信息内容及其任何部分的使用都必须包括此版权声明。\n' +
            '十、协议的终止\n' +
            '10.1 出现以下情况时，淘小建有权注销您的账户，本协议于账号注销之日终止：\n' +
            '（1）淘小建有权依据本协议约定注销您的账户；\n' +
            '（2）本协议及/或平台规则变更时，您明示并通知淘小建不愿接受该等变更的；\n' +
            '（3）您有其他影响平台正常经营秩序或违法行为的。 \n' +
            '10.2 本协议终止后，除法律有明确规定外，淘小建无义务向您或您指定的第三方披露您账户中的任何信息。且淘小建仍享有下列权利：\n' +
            '（1）继续保存您留存于淘小建自建房平台的各类信息；\n' +
            '（2）对于您过往的违约行为，淘小建仍可依据本协议向您追究违约责任。\n' +
            '10.3 本协议终止后，对于您在本协议存续期间产生的交易订单，淘小建可通知商家、注册用户并根据商家、注册用户的意愿决定是否关闭该等交易订单；如商家、注册用户要求继续履行的，则您应当就该等交易订单继续履行本协议及交易订单的约定，并承担因此产生的任何损失或增加的任何费用。\n' +
            '10.4 本协议的终止不影响守约方向违约方追究违约责任。\n' +
            '十一、法律适用\n' +
            '11.1 本协议之订立、生效、解释、修订、补充、终止、执行与争议解决均适用中华人民共和国大陆地区法律；如法律无相关规定的，参照商业惯例及/或行业惯例。\n' +
            '11.2 如果本协议中任何一条被视为废止、无效或因任何理由不可执行，该条应视为可分的且并不影响任何其余条款的有效性和可执行性。\n' +
            '十二、争议\n' +
            '您因使用淘小建自建房平台服务所产生及与平台服务有关的争议，由淘小建与您协商解决。协商不成时，任何一方均可向被告所在地人民法院提起诉讼。\n' +
            '注：此协议未尽事宜，双方以平等公正的态度友好协商。',
        }).then(() => {
          // on close
        })

      },
      showCancel ()  {
        Dialog.alert({
          messageAlign:'left',
          title: '取消政策',
          message: '温馨提示：当您的订单存在问题需要退款/售后，建议您优先联系卖家咨询，卖家会积极帮您解决您的问题；若您和卖家无法协商一致，建议您按照您的订单状态查看具体的退款操作流程。 \n' +
            '1.用户下单并支付货款后在卖方未发货情况下可以取消订单（定制商品须同卖家协商，卖家同意后方可取消订单）\n' +
            '2.用户下单后如卖方已发货暂不可取消订单，收货后如符合退换货条件即可申请退换货（定制商品须同卖家协商）并将货物退回至卖家，退货过程中所产生的邮费责任问题，需要卖买双方自行商议。\n' +
            '3.如您申请退款，商家核实后会在3个工作日内将款项退回至您的账户内（如您已使用优惠券则优惠金额不予退还，只退还实际支付金额）。\n' +
            '4.申请退款后，请关注交易超时时间。如卖家拒绝退款申请，买家未能在交易超时时间内作出回应的情况下，系统将会关闭退款协议；若交易还没有结束，买家仍可重新申请退款。如卖家在交易超时时间内没有回应退款申请，系统将会视作卖家默认同意退款申请。如买家选择不需退货，款项直接退回给买家；如买家选择需要退货，买家需将商品寄回给卖家，卖家收货验证无误后将款项退回至您的账户。\n' +
            '5. 如双方在申请退款后3天内还未达成退款协议，您可申请平台介入。客服将会就双方所提供的证据进行公正判定。\n' +
            '6. 如您需要退货，须在退款协议达成之后再安排寄货，以免造成您的财物损失。并请保留退货的快递单并于退款页面内上传相关证明。\n' +
            '7.如全额退款，平台所收的服务费将会一并退回。否则，该服务费将按比例退回。\n' +
            '8.交易成功15天内买家未提出退款申请或申请售后，系统将会自动打款给卖家。\n' +
            '温馨提示：交易成功后15天内若您对商品或服务存在异议，可以发起【申请售后】进行维权。如果已经超过该期限，需要自行与卖家友好沟通，协商处理，如协商未果可申请平台介入，争议处理过程中，淘小建平台有权要求顾客或商家提供证明证据，平台将会就双方所提供的证据进行公正判定。\n' +
            '注：上述条款外的其他事项，平台将根据各方提交证据进行公正判定。',
        }).then(() => {
          // on close
        })

      },
      showRefund(){
        Dialog.alert({
          messageAlign:'left',
          title: '退款政策',
          message: '温馨提示：当您的订单存在问题需要退款/售后，建议您优先联系卖家咨询，卖家会积极帮您解决您的问题；若您和卖家无法协商一致，建议您按照您的订单状态查看具体的退款操作流程。 \n' +
            '1.用户下单并支付货款后在卖方未发货情况下可以取消订单（定制商品须同卖家协商，卖家同意后方可取消订单）\n' +
            '2.用户下单后如卖方已发货暂不可取消订单，收货后如符合退换货条件即可申请退换货（定制商品须同卖家协商）并将货物退回至卖家，退货过程中所产生的邮费责任问题，需要卖买双方自行商议。\n' +
            '3.如您申请退款，商家核实后会在3个工作日内将款项退回至您的账户内（如您已使用优惠券则优惠金额不予退还，只退还实际支付金额）。\n' +
            '4.申请退款后，请关注交易超时时间。如卖家拒绝退款申请，买家未能在交易超时时间内作出回应的情况下，系统将会关闭退款协议；若交易还没有结束，买家仍可重新申请退款。如卖家在交易超时时间内没有回应退款申请，系统将会视作卖家默认同意退款申请。如买家选择不需退货，款项直接退回给买家；如买家选择需要退货，买家需将商品寄回给卖家，卖家收货验证无误后将款项退回至您的账户。\n' +
            '5. 如双方在申请退款后3天内还未达成退款协议，您可申请平台介入。客服将会就双方所提供的证据进行公正判定。\n' +
            '6. 如您需要退货，须在退款协议达成之后再安排寄货，以免造成您的财物损失。并请保留退货的快递单并于退款页面内上传相关证明。\n' +
            '7.如全额退款，平台所收的服务费将会一并退回。否则，该服务费将按比例退回。\n' +
            '8.交易成功15天内买家未提出退款申请或申请售后，系统将会自动打款给卖家。\n' +
            '温馨提示：交易成功后15天内若您对商品或服务存在异议，可以发起【申请售后】进行维权。如果已经超过该期限，需要自行与卖家友好沟通，协商处理，如协商未果可申请平台介入，争议处理过程中，淘小建平台有权要求顾客或商家提供证明证据，平台将会就双方所提供的证据进行公正判定。\n' +
            '注：上述条款外的其他事项，平台将根据各方提交证据进行公正判定。'
        }).then(() => {
          // on close
        })
      },
      //根据施工队分期支付id查询凭证审核状态
      instalmentSelectById() {
        instalmentSelect(this.instalmentId).then(res => {
          console.log(res.data.data.voucherStatus);
          if (res.data.data.voucherStatus == 1) {
            this.disabled = false;
            this.zhiduertou = true;
            alert("第一期支付凭证审核通过！")
            clearInterval(this.timing);
          }
        });
      }
    }
  }
</script>

<style scoped>
  .footer .left-p {
    font-size: 12px;
  }

  .imgaa {
    width: 1.5rem;
    height: 1.5rem
  }

  .footer img {
    width: 24px;
    height: 24px;
    margin: 0 auto;
  }

  .footer li {
    text-align: center;
    font-family: Arial;
  }

  .footer span {
    font-family: Arial;
  }

  .footer .btn {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    background-color: rgba(195, 155, 115, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    font-family: Arial;
    margin-left: 20px;
  }

  .footer {
    width: 100%;
    height: 77px;
    line-height: 20px;
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: center;
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 100);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  .p-row .my-span {
    color: #5290ff;
  }

  .p-row span {
    color: rgba(16, 16, 16, 100);
    font-size: 16px;
    font-family: PingFangSC-regular;
    margin-top: 10px;
  }

  .p-row {
    width: 85%;
    margin: 10px auto;
    text-align: left;
  }

  .password {
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
  }

  .enter .enterBtn {
    display: block;
    width: 58px;
    height: 28px;
    line-height: 20px;
    border-radius: 25px;
    background-color: #c39b73;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 100);
    text-align: center;
    line-height: 28px;
  }

  .enter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .enter .title {
    color: rgba(113, 112, 112, 100);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
    margin-left: 13px;
  }

  .enter >>> .van-password-input__security {
    width: 144px;
    height: 24px;
  }

  .password .public {
    margin-left: 5px;
  }

  .password .title {
    color: rgba(16, 16, 16, 100);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .password .ipt input {
    width: 60px;
  }

  .password .list {
    display: flex;
    justify-content: center;
    margin-top: 14px;
  }

  .je {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-left: 19px;
  }

  .je input {
    border: 1px solid #c39b73;
    width: 50px;
    height: 18px;
    padding-left: 5px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 13px;
  }

  .je span {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .ht {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    font-family: PingFangSC-bold;
    font-weight: bold;
    margin-top: 9px;
    margin-left: -30px;
  }

  .upload .first {
    margin-left: 9px;
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }

  .time-p {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
    margin-left: 10px;
  }

  .ipt >>> .van-uploader__upload {
    background-color: transparent;
    border: 1px dashed #bbbbbb;
  }

  .uploader-p {
    margin-top: 10px;
    margin-left: 10px;
  }

  .ipt label {
    color: rgba(16, 16, 16, 100);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .ipt input {
    padding-left: 15px;
    box-sizing: border-box;
    width: 78px;
    background-color: transparent;
    height: 25px;
    border: 0;
    margin-left: -15px;
    border-bottom: 1px solid #bbbbbb;
    font-size: 12px;
  }

  .upload ul {
    display: flex;
  }

  .upload .first {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }

  .upload .last {
    color: rgba(255, 0, 0, 100);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
    margin-left: 10px;
  }

  .upload {
    width: 100%;
    height: 242px;
    padding-left: 22px;
    padding-right: 27px;
  }

  .box {
    text-align: right;
    margin-left: 10px;
  }

  .tgz {
    color: rgba(255, 0, 0, 100);
    font-size: 12px;
    text-align: left;
  }

  .tg {
    color: rgba(255, 0, 0, 100);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
    padding: 0rem 2rem 0rem 2rem;
  }

  .dd {
    color: rgba(16, 16, 16, 100);
    font-size: 19px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
    /*margin: 10px 10px 10px 10px;*/
    /*padding: 0rem 10rem 0rem 0rem;*/
  }

  .zhifu {
    width: 32px;
    height: 32px;
  }

  .checkbox ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .checkbox {
    width: 100%;
    height: 54px;
    padding-left: 31px;
    padding-right: 31px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  div {
    box-sizing: border-box;
  }

  .PaymentDetails {
    height: 100vh;
  }

  .prev-btn {
    height: 44px;
    overflow: hidden;
  }

  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .now-payment {
    width: 100%;
    height: 92px;
    /* background-color: skyblue; */
    /*margin-top: 24px;*/
  }

  .now-list {
    display: flex;
  }

  .now-list li {
    flex: 1;
    height: 92px;
    /* background-color: pink; */
  }

  .now-list .left {
    /* background-color: tomato; */
    padding-top: 25px;
    padding-left: 33px;
    box-sizing: border-box;
  }

  .now-list .right {
    float: right;
    line-height: 92px;
    color: rgba(149, 4, 4, 100);
    font-size: 18px;
    text-align: right;
    font-family: SourceHanSansSC-regular;
    box-sizing: border-box;
    padding-right: 33px;
  }

  .now-list h2 {
    color: rgba(16, 16, 16, 100);
    font-size: 18px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
    /* text-align: center; */
  }

  .now-list p {
    color: rgba(115, 116, 117, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
    /* text-align: center; */
  }

  .border {
    width: 305px;
    height: 0px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(240, 240, 240, 100);
  }
</style>
